import React, { memo } from 'react';
import Header from '@/components/Header';
import GoBack from '@/components/GoBack';
import UserInfo from '@/components/UserInfo';
import IconTextBtn from '@/components/IconTextBtn';
import { saveAs } from 'file-saver';
import { uuid } from '@/utils/tool';
import { Modal } from 'antd';
import { history } from 'umi';
import TransformTool from '@/utils/transformJson';

interface EditorHeaderProps {
  pointData: any;
  pageData: any;
  location: any;
  clearData: any;
  undohandler: any;
  redohandler: any;
  importTpl: any;
  onReview: Function;
}
const EditorHeader = memo((props: EditorHeaderProps) => {
  const {
    pointData,
    pageData,
    location,
    clearData,
    undohandler,
    redohandler,
    importTpl,
    onReview,
  } = props;

  const toHelp = () => {
    history.push('/help');
  };
  const deleteAll = () => {
    Modal.confirm({
      centered: true,
      title: '确认清空?',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        clearData();
      },
    });
  };
  const downLoadJson = () => {
    const jsonStr = JSON.stringify(pointData);
    const blob = new Blob([jsonStr], { type: 'text/plain;charset=utf-8' });
    saveAs(blob, 'template.json');
  };
  const newPage = () => {
    clearData();
    history.push(`/editor?tid=${uuid(8, 16)}`);
  };
  const saveData = () => {
    const transform = new TransformTool({ lists: pointData, pageData });

    transform.transform();
    const htmlContent = transform.getRenderContent();
    console.log(pointData, htmlContent);
  };

  const reviewData = () => {
    const transform = new TransformTool({ lists: pointData, pageData });

    transform.transform();
    const htmlContent = transform.getRenderContent();

    onReview(htmlContent);
  };
  return (
    <Header
      leftRender={<GoBack className="pl16" />}
      rightRender={
        <div className="flex items-center">
          <IconTextBtn
            icon="icon-shanchu"
            text="清空"
            disabled={!pointData.length}
            onClick={deleteAll}
            className="mx20"
          />
          <IconTextBtn
            icon="icon-baocun"
            text="保存"
            onClick={saveData}
            className="mx20"
          />
          <IconTextBtn
            icon="icon-baocunbingtuichu"
            text="保存并退出"
            className="mx20"
          />
          <IconTextBtn
            icon="icon-yulan"
            text="预览"
            className="mx20"
            onClick={reviewData}
          />
          <UserInfo />
        </div>
      }
    />
  );
});

export default EditorHeader;
